<template>
	<view class="user-order">
		<!-- <swiper :duration="300" @change="changeSwiper" class="ud-swiper" style="height: 100%;" :current="swiperCurrent1"> -->
		<!-- <swiper-item> -->
		<scroll-view :scroll-y="true" class="scrollStyle" @scrolltolower="loadMore(0)">
			<view class="no-orderList" v-if="orderAssessList.length==0">
				<text>暂无相关内容</text>
			</view>
			<view class="od-line3" v-for="(item,index) in orderAssessList" :key="index">
				<tui-swipe-action style="border-radius: 10upx;" :actions="actions" @click="handlerButton" :params="item">
					<template v-slot:content>
						<view class="content-line1" style="padding: 0 25upx;" @click="navToShop(item)">
							<image :src="item.shop_img" mode="aspectFill" style="margin-right: 10upx;border-radius: 50%;" class="order-icon"></image>
							<text class="line1-text2 font30">{{item.shop_name}}</text>
							<text class="iconfont">&#xe600;</text>
							<text class="order-status">{{item.Refunds_status_name}}</text>
						</view>

						<view class="content-line2" style="padding: 0 25upx;" @click="navDetailPage(item)">
							<view class="line1-text1">
								<image :src="item.pro_img" mode="aspectFill"></image>
							</view>
							<view class="line1-text2 font28">
								<view class="content-title">
									{{item.pro_name}}
								</view>
								<view class="price">
									<text class="font30">
										￥{{item.or_price}}
									</text>
									</br>
									<text class="font24">
										×{{item.or_pronum}}
									</text>
								</view>
								<view class="order-number">
									订单号:{{item.orid}}
								</view>
							</view>
						</view>
						<view class="content-line3" style="padding: 0 25upx;">
							<view class="line3-r">
								<text class="font24 ">
									共{{item.or_pronum}}件商品
								</text>
								<text class="font24 padding13">
									合计：
								</text>
								<text class="font30 money">
									￥{{item.or_pronum * item.or_price}}
								</text>
							</view>
						</view>
					</template>
				</tui-swipe-action>
			</view>
			<!-- 上拉加载区域 -->
			<view v-show="isUpLoading" class="load">
				<view class="load-tip">{{loadingText}}</view>
			</view>
		</scroll-view>
		<!-- </swiper-item> -->
		<!-- </swiper> -->
	</view>
</template>

<script>
	import tuiSwipeAction from "@/components/swipe-action/swipe-action"

	export default {
		components: {
			tuiSwipeAction
		},
		data() {
			return {
				loadingMask: false,
				isUpNoMore: false, // 上拉加载: 是否显示 "-- END --"
				isUpLoading: false, // 上拉加载: 是否显示 "加载中..."
				loadingText: '', //加载文字
				swiperCurrent1: 0,
				orderAssessList: [],
				current_page: 1,
				actions: [{
						name: '取消退款',
						color: '#FF557D',
						fontsize: 30, //单位upx
						width: 80, //单位px
						//icon: 'like.png',//此处为图片地址
						// background: '#FF557D',
					}
				]
			}
		},
		onLoad() {
			this.afterSaleList(1)
		},
		methods: {
			handlerButton(e){//取消订单
				console.log(e)
				if(e.item.Refunds_status == 0){
					uni.showModal({
						title: '提示',
						content: '确定取消？',
						success: res => {
							if (res.confirm) {
								this.cancelRefundOrder(e.item.Refunds_id)
							} else if (res.cancel) {
					
							}
						}
					});
				}else{
					uni.showModal({
						title: '提示',
						content: '该订单不能取消！',
						success: res => {
							if (res.confirm) {
								
							} else if (res.cancel) {
					
							}
						}
					});
				}
			},
			async cancelRefundOrder(id){
				let res = await this.$http.cancelRefund({
					refunds_id:id
				});
				if(res.code == 200){
					uni.showToast({
						title: '取消成功!',
						icon: 'none',
						duration: 2000
					});
					this.afterSaleList(1)
				}else{
					uni.showToast({
						title: res.message,
						icon: 'none',
						duration: 2000
					});
				}
			},
			navToShop(item){
				let id = item.shop_id
				uni.navigateTo({
					url: '/pages/user/storedetails?shid=' + JSON.stringify(id)
				})
			},
			navDetailPage(item) {
				let id = item.Refunds_id
				if(item.Refunds_status_name == "已取消"){
					return
				}
				uni.navigateTo({
					url: '/pages/afterSale/afterSaleDetils?id=' + JSON.stringify(id)
				})
			},
			async afterSaleList(type) {
				let res = await this.$http.afterSale({
					type: type,
					page: this.current_page
				});
				this.orderAssessList = res.data
			},
			changeSwiper(e) {
				this.swiperCurrent1 = e.target.current
			},
			//加载更多
			loadMore(index) {
				this.isUpLoading = true
				this.loadingText = '加载中...';
				this.current_page++;
				this.getMore(index + 1);
			},
			// 加载更多
			async getMore(index) {
				let result = await this.$http.afterSale({
					type: index,
					page: this.current_page
				})
				let data = result.data
				if (result.code == 409 || data.length == 0) {
					this.loadingText = '没有更多数据了';
					return
				}
				this.orderAssessList.push(...data)
				console.log(this.orderAssessList)
			},
		},
	}
</script>

<style lang="scss" scoped>
	@import 'static/css/user-order.scss';
	.tui-swipeout-wrap{
		padding: 0px !important;
	}
	.od-line2 .line2-active:after {
		left: 100upx;
	}

	.od-line3 .content-line3 {
		height: 110upx;
		line-height: 110upx;
	}

	.od-line3 .content-line3 .line3-l {
		line-height: 110upx;
	}

	.load {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

		.load-tip {
			font-size: 24upx;
			color: #999999;
		}
	}

	.no-orderList {
		width: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 28upx;
		color: #999999;
		padding-top: 30%;
	}
</style>
